<template>
  <div class="mv-container">
    <div class="mv-wrap">
      <h3 class="title">mv详情</h3>
      <div class="video-wrap">
        <video controls :src="url" ref="myVideo" autoplay></video>
      </div>
      <div class="info-wrap">
        <div class="author-wrap">
          <div class="avatar">
            <img v-lazy="$utils.genImgUrl(icon, 120)" />
          </div>
          <p class="author">{{ mvInfo.artistName }}</p>
        </div>
        <p class="mv-name">{{ mvInfo.name }}</p>
        <div class="mv-info">
          <span class="date">发布：{{ mvInfo.publishTime }}</span>
          <span class="number">播放：{{ mvInfo.playCount }} 次</span>
          <p class="desc">
            {{ mvInfo.desc }}
          </p>
        </div>
      </div>

      <div class="comments">
        <Comment :id="id" type="mv" />
      </div>
    </div>

    <div class="mv-recommend">
      <h3 class="title">相关推荐</h3>
      <div class="simi-mv-card" v-for="(item, index) in simiMvs" :key="index" @click="playMv(item.id)">
        <div class="card-left">
          <div class="img-wrap">
            <img v-lazy="$utils.genImgUrl(item.cover, 500, 260)" />
            <div class="play-count-wrap" v-if="item.playCount">
              <Icon type="play" />
              {{ $utils.formatNumber(item.playCount) }}
            </div>
            <div class="play-icon-wrap">
              <PlayIcon :size="36" class="play-icon" />
            </div>
            <div class="duration-wrap" v-if="item.duration">
              {{ $utils.formatTime(item.duration / 1000) }}
            </div>
          </div>
        </div>
        <div class="card-right">
          <p class="name" v-if="item.name">{{ item.name }}</p>
          <p class="author" v-if="item.artistName">{{ item.artistName }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMvUrl, getMvDetail, getArtistIcon, getMvComment, getSimiMvUrl } from 'network/request'
import { mapState, mapMutations } from '@/store/helper/music'

export default {
  name: 'mv',
    metaInfo() {
    return {
      title: this.mvInfo.name ? this.mvInfo.name : '我永远喜欢宫胁咲良',
    }
  },
  data() {
    return {
      // mv地址
      url: '',
      mvInfo: {},
      simiMvs: [],
      icon: ''
    }
  },
  methods: {
    init() {
      this._getMvUrl()
      this._getMvDetail()
      this._getSimiMvUrl()
      this.$nextTick(() => {
        this.bindEventListener()
      })
    },
    // 获取MV播放地址
    async _getMvUrl() {
      const { data } = await getMvUrl({ id: this.id, r: 1080 })
      this.url = data.url
    },

    // 获取MV详情
    async _getMvDetail() {
      const { data } = await getMvDetail({ id: this.id })
      this.mvInfo = data
      // 获取歌手头像
      const { artist } = await getArtistIcon(this.mvInfo.artists[0].id)
      this.icon = artist.picUrl
    },

    // 获取相关MV
    async _getSimiMvUrl() {
      const { mvs } = await getSimiMvUrl({ mvid: this.id })
      this.simiMvs = mvs
    },

    playMv(id) {
      this.removeEventListener()
      this.$router.push(`/mv/${id}`)
    },
    updateAudioState() {
      if (this.playing) {
        this.setPlayingState(false)
      }
    },
    bindEventListener() {
      this.$refs.myVideo.addEventListener('play', this.updateAudioState)
    },
    removeEventListener() {
      this.$refs.myVideo.removeEventListener('play', this.updateAudioState)
    },
    ...mapMutations(['setPlayingState'])
  },
  watch: {
    id: {
      handler(newId) {
        if (newId) {
          this.init()
        }
      },
      immediate: true
    }
  },
  computed: {
    id() {
      return this.$route.params.id
    },
    ...mapState(['playing'])
  },
  beforeDestroy() {
    this.removeEventListener()
  }
}
</script>

<style lang="scss" scoped>
.mv-container {
  padding: 32px;
  display: flex;

  .title {
    margin-bottom: 1.14286rem;
    font-size: 1.14286rem;
    font-weight: 700;
  }

  .mv-wrap {
    flex: 1;
    .video-wrap {
      width: 100%;
      height: 390px;
      margin-bottom: 20px;

      video {
        border-radius: 5px;
        height: 100%;
        width: 100%;
        margin-top: 8px;
        object-fit: cover; // 覆盖原生组件样式
        outline: none;
      }
    }

    .info-wrap {
      margin-bottom: 50px;

      .author-wrap {
        display: flex;
        align-items: center;
        margin-bottom: 32px;

        .avatar {
          @include img-wrap(60px);
          margin-right: 8px;
          img {
            @include round(60px);
          }
        }

        .author {
          font-size: $font-size-lg;
        }
      }
      .mv-name {
        margin-bottom: 16px;
        font-size: $font-size-title-lg;
        font-weight: $font-weight-bold;
      }

      .mv-info {
        .desc {
          font-size: 15px;
          margin-top: 20px;
        }
      }
    }
    .date {
      margin-right: 25px;
    }
    .date,
    .number {
      color: #bebebe;
      font-size: 14px;
    }
  }

  .mv-recommend {
    width: 36%;
    padding-left: 20px;
    .simi-mv-card {
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 8px 0;

      &:hover {
        background: var(--light-bgcolor);
      }
      .card-left {
        width: 50%;
        min-width: 180px;
        .img-wrap {
          position: relative;
          padding-top: 56%;

          img {
            @include abs-stretch();
            width: 100%;
            height: 100%;
            border-radius: 4px;
          }

          .play-icon-wrap {
            @include abs-stretch;

            &:hover {
              .play-icon {
                opacity: 1;
              }
            }

            .play-icon {
              @include abs-center;

              opacity: 0;
              transition: opacity 0.3s;
            }
          }

          .play-count-wrap {
            display: flex;
            align-items: center;
            position: absolute;
            right: 2px;
            top: 2px;
            font-size: $font-size-sm;
            color: $white;

            i {
              display: inline-block;
              margin-right: 4px;
            }
          }

          .duration-wrap {
            position: absolute;
            right: 2px;
            bottom: 2px;
            font-size: $font-size-sm;
            color: $white;
          }
        }
      }

      .card-right {
        margin-left: 12px;
        .name {
          margin-top: 8px;
          @include text-ellipsis;
          font-size: $font-size-sm;
        }

        .author {
          margin-top: 4px;
          @include text-ellipsis;
          font-size: $font-size-sm;
          color: var(--font-color-grey-shallow);
        }
      }
    }
  }
}
</style>
